import "./index.scss";
import Map from "./center/map";
// import AppletList from "./left/AppletList";
import DeviceChart from "./left/DeviceChart";
import ForwordChart from "./left/ForwordChart";
import RuleChart from "./left/RuleChart";
import EventList from "./right/EventList";
import AlarmChart from "./right/AlarmChart";
import SurvivalDevice from "./right/SurvivalDevice";
import SurvivalUser from "./right/SurvivalUser";
import { debounce } from "lodash";
import SystemChart from "./center/SystemChart";
import TotalData from "./center/TotalData";
import { stat, StatDataType } from "@/api/modules/stat/stat";
import { dayjs } from "element-plus";
import { getDeviceList } from "@/api/modules/iot/device";
export default defineComponent({
	name: "Home",
	emits: [],
	setup() {
		const debouncedResize = debounce(() => {
			SystemChartEl.value && SystemChartEl.value.resize();
			DeviceChartEl.value && DeviceChartEl.value.resize();
			ForwordChartEl.value && ForwordChartEl.value.resize();
			AlarmChartEl.value && AlarmChartEl.value.resize();
			RuleChartEl.value && RuleChartEl.value.resize();
			SurvivalDeviceEl.value && SurvivalDeviceEl.value.resize();
			SurvivalUserEl.value && SurvivalUserEl.value.resize();
		}, 200);

		const MapEl = ref();
		const SystemChartEl = ref();
		const DeviceChartEl = ref();
		const ForwordChartEl = ref();
		const AlarmChartEl = ref();
		const RuleChartEl = ref();
		const SurvivalDeviceEl = ref();
		const SurvivalUserEl = ref();
		const EventListEl = ref();
		const TotalDataEl = ref();
		const showMap = ref(false);
		let autoRefresh: NodeJS.Timeout;
		onMounted(() => {
			window.addEventListener("resize", debouncedResize);
			showMap.value = true;
		});
		onActivated(() => {
			nextTick(() => {
				loadBizData();
			});
		});
		onDeactivated(() => {
			unLoadData();
		});
		onBeforeUnmount(() => {
			unLoadData();
			window.removeEventListener("resize", debouncedResize);
		});
		const unLoadData = () => {
			if (autoRefresh) {
				clearTimeout(autoRefresh);
			}
		};
		const loadData = async () => {
			autoRefresh = setTimeout(async () => {
				await loadEventListData();
				await loadSystemChartData();
				await loadData();
			}, 10 * 1000);
		};
		const loadBizData = async () => {
			await loadDeviceChartData();
			await loadForwordChartData();
			await loadRuleChartData();
			await loadTotalDataData();
			await loadEventListData();
			await loadAlarmChartData();
			await SurvivalDeviceData();
			await SurvivalUserData();
			await loadSystemChartData();
			await loadDeviceListData();

			await loadData();
		};
		const loadDeviceChartData = async () => {
			let res = await stat({ dataType: StatDataType.DEV_COUNT });
			await DeviceChartEl.value.load(res);
		};
		const loadForwordChartData = async () => {
			let res = await stat({ dataType: StatDataType.DATA_FORWARD_NUM });
			await ForwordChartEl.value.load(res);
		};
		const loadRuleChartData = async () => {
			let res = await stat({ dataType: StatDataType.DATA_FORWARD_NUM });
			await RuleChartEl.value.load(res);
		};
		const loadTotalDataData = async () => {
			await TotalDataEl.value.load();
		};
		const loadEventListData = async () => {
			await EventListEl.value.load();
		};
		const loadAlarmChartData = async () => {
			let res = await stat({ dataType: StatDataType.DATA_ALARM_NUM });
			await AlarmChartEl.value.load(res);
		};
		const SurvivalDeviceData = async () => {
			let res = await stat({ dataType: StatDataType.DEV_ACTIVE_COUNT });
			await SurvivalDeviceEl.value.load(res);
		};
		const SurvivalUserData = async () => {
			let res = await stat({
				dataType: StatDataType.USER_ACTIVE_COUNT,
				startTime: dayjs().subtract(10, "d").format("YYYY-MM-DD 00:00:00"),
				endTime: dayjs().format("YYYY-MM-DD 23:59:59")
			});
			await SurvivalUserEl.value.load(res);
		};
		const loadSystemChartData = async () => {
			await SystemChartEl.value.load();
		};
		const loadDeviceListData = async () => {
			let res = await getDeviceList({ pageIndex: 1, pageSize: 99999 });
			await MapEl.value.load(res);
		};
		return () => {
			return showMap.value ? (
				<div class="home-page h-full flex justify-center items-center relative">
					{/* 中间内容 */}
					<Map ref={MapEl} />
					<TotalData ref={TotalDataEl} />
					<SystemChart ref={SystemChartEl} />

					{/* 左侧内容 */}
					{/* <AppletList /> */}
					<DeviceChart ref={DeviceChartEl} />
					<ForwordChart ref={ForwordChartEl} />
					<RuleChart ref={RuleChartEl} />

					{/* 右侧内容 */}
					<EventList ref={EventListEl} />
					<AlarmChart ref={AlarmChartEl} />
					<SurvivalDevice ref={SurvivalDeviceEl} />
					<SurvivalUser ref={SurvivalUserEl} />
				</div>
			) : null;
		};
	}
});
